<template>
    <div class="pagination">
        <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :page-sizes="[10, 20, 30, 40]"
            :small="small" layout="total, sizes, prev, pager, next, jumper" :total="total4"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
// 定义 props 接收父组件传递的数据
const props = defineProps({
    total: {
        type: Number,
        default: 0
    },
    page: {
        type: Object,
        default: () => { }
    }
})
// 定义 emits 触发自定义事件
const emit = defineEmits(['pageSizeChanged', 'currentPageChanged'])

const currentPage4 = ref()
const pageSize4 = ref()
const total4 = ref()
const small = ref(false)

onMounted(() => {
    currentPage4.value = props.page.pageNum
    pageSize4.value = props.page.pageSize
    total4.value = props.total
})
const handleSizeChange = (val) => {
    currentPage4.value = 1
    emit('pageSizeChanged', val)
}
const handleCurrentChange = (val) => {
    pageSize4.value = 10
    emit('currentPageChanged', val)
}
</script>

<style lang="scss" scoped>
.pagination {
    float: right;
    margin: 15px;

    ::v-deep .el-select {

        width: 100px !important;
    }

    ::v-deep .el-input {
        width: 100px !important;
    }
}
</style>